<template>
  <div class="Tables">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column prop="title"   label="名称" width="200" align="center"></el-table-column>
      <el-table-column prop="name" label="图片" width="180" align="center">
        <template slot-scope="scope">
          <img @click="imgpre(scope.row.head_img)" class="tableimg" :src="scope.row.head_img" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="school" label="关联校区" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.school_id.title[0]}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="link_man" label="联系人" align="center"></el-table-column>
      <el-table-column prop="link_tel" label="联系电话" align="center"></el-table-column>
      <el-table-column prop="" label="地址" align="center" width="300">
        <template slot-scope="scope">
           <el-tooltip class="item" effect="dark" placement="top" v-if="scope.row.address">
            <div slot="content" class="zzyqshowtag">
              <span>
                {{ scope.row.address }}
              </span>
            </div>
            <span class="ellipsis">{{ scope.row.address.slice(0,13)}}...</span>
          </el-tooltip>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="线上展示" align="center">
         <template slot-scope="scope">
           <span  class="clickSwitch" @click="clickSwitch"><el-switch v-model="scope.row.state" disabled v-if="scope.row.status==0" ></el-switch></span>

            <el-switch v-model="scope.row.state" v-if="scope.row.status==1" @change="changeStatus(scope.row.state,scope.row.id)" :active-value='1' :inactive-value='0'></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="审核状态" align="center" :render-header="renderTip">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">待审核</span>
          <span v-if="scope.row.status==1">已通过</span>

          <el-tooltip class="item" effect="dark" :content="scope.row.back_info" placement="top-start">
              <span v-if="scope.row.status==2" class="cur">已驳回</span>
          </el-tooltip>
        </template>
      </el-table-column>
       <el-table-column prop="address" label="操作" align="center" v-if="checkPermission(['admin'])">
         <template slot-scope="scope">
            <span class="edittext" @click="editform(scope.row.id)">编辑</span>
            <span class="edittext" @click="deleteitem(scope.row.id)">删除</span>
         </template>
       </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next"
          :total="pages.total">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 图片预览插件 -->
    <el-image-viewer
        v-if="showViewer"
        :on-close="()=>{showViewer=false}"
        :url-list="viewUrl"/>
  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import {updatestate} from '@/api/enroll'
//按钮权限验证
import checkPermission from "@/utils/permission";
export default {
  data() {
    return {
      //表格数据
      tableData: [],
      //页码数据
      pages:{},
      value:true,
      //是否显示预览图片
      showViewer: false,
      //预览图片数组
      viewUrl: [],
      currentPage4:4,
      tableData: [],
    }
  },
  props: {
     //表格数据
    tabData:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  methods: {
    checkPermission,
    //审核状态 提示
    renderTip(h, { column }) {
      return h(
        'div',
        {
          style: 'display:flex;margin:0 auto; justify-content: center;',
        },
        [
          h('span', column.label),
          h('promptmessage', {
            props: {
              messages: ['提交的审核信息将在审核通过后才可同步展示'],
            },
          }),
        ]
      )
    },
    clickSwitch(){
      this.$message({
            type: 'info',
            message: '报名点信息正在审核中!'
          });
    },
    //切换状态
    async changeStatus(val,id){
   
      let state = val?0:1
      let params = {
        id:id,
        state:state
      }
      let data = await updatestate(params)
      if(data.code=='0000'){
         this.$message({
            type: 'success',
            message: '修改成功!'
          });
      }
    },
    //编辑
    editform(id){
      let params = {
        id,
        type:1
      }
      //显示dialog通知父组件打开弹窗
      this.$emit('openedit',params)
    },
    //删除
    deleteitem(id){
      this.$emit('deleteitem',id)
    },
    imgpre(imgs){
      //每次点击的时候清空数组
      this.viewUrl = []
      this.viewUrl.push(imgs)
      this.showViewer  = true
    },
    //翻页 一页多少条数据
    handleSizeChange(val) {
      this.$emit('changepageTotal',val)
    },
    //翻页当前页
    handleCurrentChange(val) {
        this.$emit('changepage',val)
      }
  },
  components:{
    ElImageViewer
  },
  mounted(){
    this.tableData = this.tabData.list
    this.pages = this.tabData.page
  },
  watch:{
    tabData(val){
      this.tableData = val.list
      this.pages = val.page
    }
  }
}
</script>

<style scoped lang='scss'>
.Tables {
  margin-top: 25px;
}
.edittext{
  margin: 0 10px;
  color: #4c68ef;
  cursor: pointer;
}
.pagination{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.edittext{
  margin: 0 10px;
  color: #4c68ef;
  cursor: pointer;
  font-size: 13px;
}
.cur{
  cursor: pointer;
}
</style>
